<template>
  <el-form label-position="top" :rules="rules" ref="form" :model="form" class="padding-b" @submit.native.prevent>
    <el-form-item :label="label" prop="value">
      <el-input
        size="mini"
        v-model.trim="form.value"
        :placeholder="placeholder"
        :disabled="disabled"
        @blur="blur"
        :name="'num' + id"
        autoComplete="on"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
import { checkform } from '@/utils/validate.js'
export default {
  name: 'Bnumber',
  props: {
    label: String,
    default: { type: String | Number, default: '' },
    id: String,
    disabled: { type: String | Boolean, default: false },
    placeholder: { type: String, default: '' },
    require: String,
    random: { type: Number, default: 0 }
  },
  data() {
    let self = this
    let validate1 = (rule, value, callback) => {
      if (self.require !== 'no') {
        if (value === '') {
          callback(new Error(self.$t('validate.required')))
        }
      }
      if (value === '' || !checkform(value, 'Number') || !checkform(value, 'Double')) {
        callback()
      } else {
        callback(new Error(this.$t('customer.shouldBeNumber')))
      }
    }
    return {
      form: {
        value: this.default !== '' ? this.default : ''
      },
      rules: {
        value: [{ required: this.require === 'required', validator: validate1, trigger: 'blur' }]
      }
    }
  },
  watch: {
    random: {
      deep: true,
      handler: function (newV, oldV) {
        let value = this.form.value
        let self = this
        this.$refs.form.validate((valid) => {
          if (valid) {
          } else {
            value = false
          }
        })
        self.$emit('tellme', { [self.id]: value })
      }
    }
  },
  methods: {
    submit(noCheck) {
      // noCheck为true 不进行校验
      let obj = {}
      if (noCheck) {
        obj.success = true
      } else {
        this.$refs.form.validate((valid) => {
          obj.success = valid
        })
      }
      if (obj.success) {
        obj.data = { [this.id]: this.form.value }
      }
      return obj
    },
    blur() {
      this.$emit('blurEvent', this.submit(true))
    }
  },
  mounted() {}
}
</script>
<style lang="stylus" scoped>
 @import "../../../../../assets/common.styl";
.padding-b
  padding-bottom $padding5
</style>
